<template>
  <div>
    <button @click="infoClick">info:{{ info }}</button>
    <button @click="shallowInfoClick">shallowInfo:{{ shallowInfo }}</button>
  </div>
</template>

<script setup>
import { reactive, shallowReactive } from "vue";
// 响应式转换是“深层”的：它会影响到所有嵌套的属性。
const info = reactive({
  name: "zjd",
  age: 18,
  msg: {
    date: "2022",
  },
});
const infoClick = () => {
  info.msg.date += 1;
};
// shallowReactive和 reactive() 不同，这里没有深层级的转换
const shallowInfo = shallowReactive({
  name: "qq",
  age: 18,
  msg: {
    date: "2022",
  },
});
const shallowInfoClick = () => {
  // 不会触发响应式
  shallowInfo.msg.date += 111;
};
</script>

<style scoped>
button {
  padding: 20px 20px;
  background-color: pink;
}
</style>
